<template>
  <div>
    <!--  头部导航栏  -->
    <div>
      <el-menu
          :default-active="this.$route.path"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          router
          background-color="#fff"
          text-color="#333"
          active-text-color="#0084ff"
          style="flex:1"
      >
        <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
          <template slot="title">
            <span> {{ item.navItem }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>

    <!--  页面title  -->
    <div class="title-css" style="text-align: center;padding: 20px 0;">
      内容审核机制
    </div>

    <!--  添加屏蔽词  -->
    <div style="margin-top: 50px;">
      <div style="text-align: center;padding-bottom: 20px">
        <el-button @click="showAddShield()" type="primary" style="margin-left: 20px" >添加屏蔽词</el-button>
      </div>
    </div>

    <!--  屏蔽词列表  -->
    <div style="width: 88%;margin: 0 auto" class="tableCenter">
      <el-table
          ref="multipleTable"
          :data="dataList.slice((currentPage1-1)*pageSize, currentPage1*pageSize)"
          tooltip-effect="dark"
          class="top2">
        <el-table-column
            type="index"
            label="序号"
            width="200">
        </el-table-column>
        <el-table-column
            prop="pid"
            label="屏蔽关键词id"
            width="300">
        </el-table-column>
        <el-table-column
            prop="keyword"
            label="屏蔽关键词"
            width="300">
        </el-table-column>

        <el-table-column
            prop="type"
            label="屏蔽类别"
            width="300">
        </el-table-column>

        <el-table-column
            fixed="right"
            label="操作"
            width="180">
          <template>
            <div>
              <el-row>
                <el-col :span="12">
                  <el-button class="el-icon-edit" type="text" size="lager" @click="showEditShield()">修改</el-button>
                </el-col>
                <el-col :span="12">
                  <el-popconfirm title="确定删除吗？" @confirm="deleteShield(scope.row)">
                    <el-button type="text" icon="el-icon-delete" slot="reference">删除</el-button>
                  </el-popconfirm>

                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>

      </el-table>

      <!--   分页   -->
      <div class="paginationClass" style="margin-left: -30%">
        <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1" :current-page="currentPage1"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="dataList.length">
        </el-pagination>
      </div>
    </div>

    <!--  添加屏蔽词的模态框  -->
    <div class="tableCenter">
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
                 :close-on-press-escape="false">
        <div>
          <el-form :model="form" label-position="center" label-width="120px" class="edit_form">
            <el-form-item label="屏蔽关键词" prop="">
              <el-input v-model="form.keyword" placeholder="请输入屏蔽关键词" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item style="text-align: left" label="选择屏蔽类别">
              <el-select
                  v-model="form.type"
                  class="filter-item"
                  placeholder="请选择屏蔽类别"
              >
                <el-option
                    v-for="item in types"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                />
              </el-select>
            </el-form-item>

          </el-form>
        </div>
        <div slot="footer" class="el-dialog--center">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addShield()">确定</el-button>
        </div>
      </el-dialog>
    </div>

    <!--  修改屏蔽词的模态框  -->
    <div class="tableCenter">
      <el-dialog :title="dialogTitle2" :visible.sync="dialogFormVisible2" :close-on-click-modal="false"
                 :close-on-press-escape="false">
        <div>
          <el-form :model="form" label-position="center" label-width="120px" class="edit_form">
            <el-form-item label="屏蔽关键词" prop="">
              <el-input v-model="form.keyword" placeholder="请输入屏蔽关键词" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="选择屏蔽类别">
              <el-select
                  v-model="form.type"
                  class="filter-item"
                  placeholder="请选择屏蔽类别"
              >
                <el-option
                    v-for="item in types"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                />
              </el-select>
            </el-form-item>

          </el-form>
        </div>
        <div slot="footer" class="el-dialog--center">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="editShield()">确定</el-button>
        </div>
      </el-dialog>
    </div>


  </div>
</template>

<script>
export default {
  name: "contentReview",
  data(){
    return{
      // 列表数据
      dataList:[{
        pid: "xxx",
        keyword: "xxx",
        type: "XXX",
      }],
      dialogTitle: "添加屏蔽词",
      dialogFormVisible: false,
      dialogTitle2: "修改屏蔽词",
      dialogFormVisible2: false,

      // 实现分页
      total1: 0,
      currentPage1: 1,
      pageSize: 10,

      // 导航栏数据
      navList:[
        {name:'/admin/contentReview', navItem:'内容审核机制'},
        {name:'/admin/suggestion',navItem:'意见查看与处理'}
      ],
      // 屏蔽词类别
      types: [
        {key: 1, value: "暴力"},
        {key: 2, value: "赌博"},
        {key: 3, value: "色情"},
        {key: 4, value: "非法"},
      ],
      // 表单数据
      form:{
        keyword:'',
        type:'',
      },

    }
  },

  created() {
    // 初始化页面



  },

  methods: {
    handleSelect(key, keyPath) {
    },

    // 分页
    handleSizeChange1: function (pageSize) { // 每页条数切换
      this.pageSize = pageSize
      this.currentPage1 = 1;
    },

    handleCurrentChange1: function (currentPage) {//页码切换
      this.currentPage1 = currentPage;
    },

    // 展示添加屏蔽词的模态框
    showAddShield(){
      // 打开模态框
      this.dialogFormVisible = true;
    },

    // 实现添加屏蔽词
    addShield(){


      // 关闭模态框
      this.dialogFormVisible = false;
    },

    // 展示修改屏蔽词的模态框
    showEditShield(){
      // 打开模态框
      this.dialogFormVisible2 = true;

    },

    // 实现修改屏蔽词
    editShield(){


      // 关闭模态框
      this.dialogFormVisible2 = false;
    },

  }
}
</script>

<style scoped>
.title-css {
  font-size: 25px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
}
.tableCenter{
  text-align: center;
  margin-top: 50px;
}
.edit_form {
  width: 460px;
  margin: 0 auto;
}
</style>